<template>
  <div>
    <div ref="chartColumn" style="width:100%; height:340px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      chartColumn: null,
      flag: false,
      model: {
        dataX: [],
        dataY: []
      }
    };
  },
  watch: {
    // 监听重新渲染 echarts
    model(newVal) {
      this.model = newVal;
      this.flag = true;
      this.initChart();
    }
  },
  methods: {
    // 初始化
    initChart() {
      this.chartColumn = echarts.init(this.$refs.chartColumn, this.flag);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          top: "6%",
          left: "6%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.model.dataX,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: "value",
          axisLine: { show: false }
        },
        series: [
          {
            data: this.model.dataY,
            type: "bar",
            barWidth: 12, // 柱子宽度
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#289DF5" },
                  { offset: 1, color: "#1A5EFF" }
                ])
              }
            },
            label: {
              normal: {
                show: true, //开启显示
                position: "top", //柱形上方
                textStyle: {
                  //数值样式
                  color: "#1A5EFF",
                  fontWeight: "bold"
                }
              }
            }
          }
        ]
      };
      this.chartColumn.setOption(option);
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>
